<script setup>
import {onMounted, onUnmounted} from "vue";
import point1Png from "@/assets/images/map/point1.png";

let map = null;
onMounted(() => initMap());

onUnmounted(() => {
  map?.destroy();
});

function initMap(params) {
  map = new AMap.Map("container", {
    pitch: 40, //地图俯仰角度，有效范围 0 度- 83 度
    viewMode: "3D", //地图模式
    rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
    pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
    zoom: 7, //初始化地图层级
    rotation: -10, //初始地图顺时针旋转的角度
    zooms: [7, 20], //地图显示的缩放级别范围
    // center: [115.455328, 38.435709],
    center: [116.305081, 39.242422],
  });
  map.setMapStyle("amap://styles/darkblue");

  // 设置光照
  map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.7);
  map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);

  let object3Dlayer = new AMap.Object3DLayer();
  map.add(object3Dlayer);

  let cityArr = [
    "石家庄",
    "沧州",
    "唐山",
    "衡水",
    "承德",
    "张家口",
    "廊坊",
    //   "雄安新区",
    "保定",
    "邢台",
    "邯郸",
  ];
  let citySearch = new AMap.DistrictSearch({
    subdistrict: 0, //返回下一级行政区
    extensions: "all", //返回行政区边界坐标组等具体信息
    level: "district", //查询行政级别为 市
  });

  for (let temp of cityArr) {
    citySearch.search(temp, function (status, result) {
      const position = [
        result.districtList[0].center.lng,
        result.districtList[0].center.lat,
      ];
      let bounds = result.districtList[0].boundaries;
      let height = 200000;
      let color = "#0088ffcc";
      let prism = new AMap.Object3D.Prism({
        path: bounds,
        height: height,
        color: color,
      });
      prism.transparent = true;
      object3Dlayer.add(prism);
    });
  }
  const markerArr = [
    {
      position: [114.374369, 38.129973],
      name: "石家庄服务区",
      totalNum: 293,
      kxNum: 231,
    },
    {
      position: [115.502097, 38.753672],
      name: "保定服务区",
      totalNum: 23,
      kxNum: 22,
    },
    {
      position: [116.91209, 38.234442],
      name: "沧州服务区",
      totalNum: 93,
      kxNum: 23,
    },
    {
      position: [114.543872, 36.56618],
      name: "邯郸服务区",
      totalNum: 23,
      kxNum: 22,
    },
    {
      position: [114.585435, 37.146069],
      name: "邢台服务区",
      totalNum: 93,
      kxNum: 23,
    },
    {
      position: [115.751809, 37.762969],
      name: "衡水服务区",
      totalNum: 93,
      kxNum: 23,
    },
    {
      position: [118.238142, 39.586426],
      name: "唐山服务区",
      totalNum: 93,
      kxNum: 23,
    },
    {
      position: [118.216753, 40.797731],
      name: "承德服务区",
      totalNum: 93,
      kxNum: 23,
    },
    {
      position: [114.750382, 40.734982],
      name: "张家口服务区",
      totalNum: 93,
      kxNum: 23,
    },
    {
      position: [116.479395, 39.477581],
      name: "廊坊服务区",
      totalNum: 93,
      kxNum: 23,
    },
    // {
    //   position: [114.758806, 37.966998],
    //   name: "石家庄东服务区(北京-郑州方向)",
    //   totalNum: 93,
    //   kxNum: 23,
    // },
    // {
    //   position: [114.426381, 37.944395],
    //   name: "石家庄南服务区(青岛-银川方向)",
    //   totalNum: 93,
    //   kxNum: 23,
    // },
    // {
    //   position: [114.604777, 37.784122],
    //   name: "元氏服务区(新元高速新乐方向)",
    //   totalNum: 93,
    //   kxNum: 23,
    // },
  ];

  for (const item of markerArr) {
    addMarkers(item);
  }

  function addMarkers(data) {
    // 创建两个点标记
    const m1 = new AMap.Marker({
      position: data.position,
      icon: new AMap.Icon({
        size: new AMap.Size(50, 50), //图标大小
        imageSize: new AMap.Size(50, 50),
        image: point1Png,
      }),
      //   animation: "AMAP_ANIMATION_DROP",
    });
    m1.setLabel({
      offset: new AMap.Pixel(-25, -60), //设置文本标注偏移量
      //   content: `<div class='info'>
      //             <span class='info-num'>
      //                 <span class='liang-num'>${kxNum}</span>
      //                 <span>/</span>
      //                 <span>${totalNum}</span>
      //                 </span>
      //             <span class='info-text'>${name}</span>
      //         </div>`, //设置文本标注内容
      content: `
    <div class="info-point-wrap">
          <div class="info-point-wrap-inner">
            <div class="info-point-line">
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
            </div>
            <div class="info-point-content">
              <div class="content-item"><span class="label">名称</span><span class="value">${data.name}</span></div>
              <div class="content-item"><span class="label">总数</span><span class="value">${data.totalNum}</span><span class="label">空闲</span><span class="value">${data.kxNum}</span></div>
            </div>
          </div>
        </div>`,
      direction: "right", //设置文本标注方位
    });
    map.add(m1);
  }
}
</script>

<template>
  <div id="container"></div>
</template>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: calc(104vh);
  position: absolute;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}

:deep(*) {
  .amap-marker-label {
    border: 0;
    background-color: transparent;
  }

  .info {
    position: relative;
    top: 0;
    right: 0;
    min-width: 0;
    background-color: #0000008f;
    color: white;
    border-radius: 20px 20px 20px 0;
    display: flex;
    align-items: center;
    padding: 6px 10px;
  }

  .info-num {
    font-size: 24px;
    padding: 5px 10px;
    font-weight: 900;
  }

  .info-text {
    font-size: 18px;
  }

  .liang-num {
    color: rgb(122, 243, 239);
    text-shadow: 3px 3px 4px darkcyan;
  }

  .info-point {
    background: rgba(0, 0, 0, 0.5);
    color: #a3dcde;
    font-size: 14px;
    width: 170px;
    height: 106px;
    padding: 16px 12px 0;
    margin-bottom: 30px;
    will-change: transform;

    &-wrap {
      padding: 10px;
      background: #2c2c2d66;

      &:after,
      &:before {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 15px;
        height: 15px;
        border-top: 1px solid #4b87a6;
      }

      &:before {
        left: 0;
        border-left: 1px solid #4b87a6;
      }

      &:after {
        right: 0;
        border-right: 1px solid #4b87a6;
      }

      &-inner {
        &:after,
        &:before {
          display: block;
          content: "";
          position: absolute;
          bottom: 0;
          width: 15px;
          height: 15px;
          border-bottom: 1px solid #4b87a6;
        }

        &:before {
          left: 0;
          border-left: 1px solid #4b87a6;
        }

        &:after {
          right: 0;
          border-right: 1px solid #4b87a6;
        }
      }
    }

    &-line {
      position: absolute;
      top: 7px;
      right: 12px;
      display: flex;

      .line {
        width: 5px;
        height: 2px;
        margin-right: 5px;
        background: #17e5c3;
      }
    }

    &-content {
      .content-item {
        display: flex;
        height: 28px;
        line-height: 28px;
        background: rgba(35, 47, 58, 0.6);
        margin-bottom: 5px;

        .label {
          width: 60px;
          padding-left: 10px;
          color: #02bed4;
        }

        .value {
          color: #ffffff;
          padding-right: 5px;
        }
      }
    }
  }
}

</style>
